<template>
  <div style="padding: 10px;width: 100%">
    <div style="border: 0px yellow;width: 100%;display: flex">
        <!--  功能区   -->
        <div style="margin: 10px 0;border: 0px solid">
          <el-button type="primary" size="normal" @click="add" >新增习惯</el-button>
          <el-button type="primary" size="danger" @click="add" >删除习惯</el-button>
        </div>
    </div>

    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column  label="习惯名称"  width="70px"  prop="name"  align="center"/>
      <el-table-column  label="完成率(21天)"  width="60px"    prop="rate"  align="center" sortable>
        <template #default="scope">
          {{(parseFloat(100*scope.row.rate).toFixed(2))}}%
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[0]"  :prop="dateArr[0]"  align="center"  width="47px"   >
        <template #default="scope">
          <div v-if="scope.row[dateArr[0]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[0]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column   :label="dateArr[1]"  :prop="dateArr[1]"   align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[1]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[1]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column   :label="dateArr[2]"  :prop="dateArr[2]"   align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[2]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[2]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[3]"  :prop="dateArr[3]"  align="center"  width="47px"   >
        <template #default="scope">
            <div v-if="scope.row[dateArr[3]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
            <div v-else-if="scope.row[dateArr[3]]=='X'" style="color: red;font-size: medium">X</div>
            <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[4]"  :prop="dateArr[4]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[4]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[4]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[5]"  :prop="dateArr[5]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[5]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[5]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[6]"  :prop="dateArr[6]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[6]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[6]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[7]"  :prop="dateArr[7]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[7]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[7]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[8]"  :prop="dateArr[8]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[8]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[8]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[9]"  :prop="dateArr[9]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[9]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[9]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[10]"  :prop="dateArr[10]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[10]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[10]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[11]"  :prop="dateArr[11]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[11]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[11]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[12]"  :prop="dateArr[12]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[12]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[12]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[13]"  :prop="dateArr[13]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[13]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[13]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[14]"  :prop="dateArr[14]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[14]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[14]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[15]"  :prop="dateArr[15]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[15]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[15]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[16]"  :prop="dateArr[16]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[16]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[16]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[17]"  :prop="dateArr[17]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[17]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[17]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[18]"  :prop="dateArr[18]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[18]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[18]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[19]"  :prop="dateArr[19]"  align="center"  width="47px"  >
        <template #default="scope">
          <div v-if="scope.row[dateArr[19]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[19]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  :label="dateArr[20]"  :prop="dateArr[20]"  align="center"  width="47px"   >
        <template #default="scope">
          <div v-if="scope.row[dateArr[20]]=='√'" style="color: limegreen;font-weight: bold;font-size: large">√</div>
          <div v-else-if="scope.row[dateArr[20]]=='X'" style="color: red;font-size: medium">X</div>
          <div v-else >-</div>
        </template>
      </el-table-column>
      <el-table-column  label="操作"     >
        <template #default="scope">
          <el-button type="primary" size="small" @click="finish(scope.row)">完成</el-button>
          <el-button type="edit"    size="small" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="新增习惯" width="30%">
      <el-form  :model="form" label-width="120px">
        <el-form-item label="习惯名称" style="width: 80%;">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save()">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>

</template>

<script>


import request from "@/utils/request";
import moment from 'moment';

export default {
  name: 'HabitView',
  components: {
  },
  data(){
    return{
      dateArr:[],
      form:{},
      user:{},
      dialogVisible:false,
      total:0,
      sum:0,
      date: new Date(),
      tableData: [],
      res: null,
    }
  },
  created(){
    let userStr= sessionStorage.getItem("user") || "{}"
    let user = JSON.parse(userStr)
    this.user=user;
    this.load();
  },
  methods:{
    load(){
      //加载信息
      request.get("/habit",{
        params:{
          user:this.user.username,
          date:this.date,
          numOfDays:21,
        }
      }).then(res =>{
        console.log(res)
        this.dateArr = res.data.dateArr
        this.res = res.data.arr
        this.tableData = res.data.arr
      })

    },
    add(){
      this.dialogVisible = true
    },
    save(){
      this.form.user=this.user.username
      if(this.form.id){ //更新
        request.put("/habit",this.form).then(res =>{
          console.log(res)
          if(res.code==0){
            this.$message.success("更新成功");
            this.dialogVisible=false;
            this.load();
          }else{
            this.$message.error(res.msg);
          }
        })
      }else{ //新增
        request.post("/habit",this.form).then(res =>{
          console.log(res)
          if(res.code==0){
            this.$message.success("新增成功");
            this.dialogVisible=false;
            this.load();
          }else{
            this.$message.error(res.msg);
          }
        })
      }
    },
    finish(row){
      request.get("/habit/finish",{
        params:{
          user:this.user.username,
          habitId:row.habitId,
        }
      }).then(res =>{
        if(res.code==0){
          this.$message.success("更新状态成功");
          this.load();
        }else{
          this.$message.warning(res.msg);
        }
      })
    },
    handleEdit(row){
      alert("该功能还未上线")
      // alert(JSON.stringify(row))
    },
  }
}
</script>
